<template>
  <div class="row">
    <div class="col-lg-12 col-xs-12">
      <Portlet title="服务异常">
        <el-form ref="searchForm" class="el-form-col el-form-s search-form" :model="search">
          <el-row :gutter="15">
            <el-col :lg="4" :md="6">
              <el-form-item prop="orderNo" >
                <el-input v-model="search.orderNo" type="textarea" :rows="4" clearable placeholder="服务订单号  (支持多单查询，用英文逗号分隔)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="abnormalSerNo" >
                <el-input v-model="search.abnormalSerNo" type="textarea" :rows="4" clearable placeholder="异常流水号  (支持多单查询，用英文逗号分隔)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="abnormalCode">
                <el-select v-model="search.abnormalCode" placeholder="请选择异常类型">
                  <el-option v-for="item in abnormalArr"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="info" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields('searchForm')" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="cargoOwnerName">
                <el-input v-model="search.cargoOwnerName"  placeholder="商家名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="founderName">
                <el-input v-model="search.founderName"  placeholder="发起人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="info" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields('searchForm')" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consigneName">
                <el-input v-model="search.consigneName"  placeholder="用户名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consignePhone">
                <el-input v-model="search.consignePhone"  placeholder="用户电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="startfoundDate">
                <el-date-picker type="date"
                                placeholder="发起时间(开始)"
                                value-format="yyyy-MM-dd"
                                v-model="search.startfoundDate" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="endfoundDate">
                <el-date-picker type="date"
                                placeholder="发起时间(结束)"
                                v-model="search.endfoundDate"
                                value-format="yyyy-MM-dd"
                                :picker-options="{disabledDate}" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <div v-if="isOpen">
              <el-col :lg="4" :md="6">
                <el-form-item prop="followUserName">
                  <el-input v-model="search.followUserName"  placeholder="跟进人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="followType">
                  <el-select v-model="search.followType" placeholder="请选择跟进内容">
                    <el-option v-for="item in followTypeArr"
                               :key="item.value"
                               :label="item.text"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="startNextTime">
                  <el-date-picker type="date"
                                  placeholder="下次跟进开始时间"
                                  value-format="yyyy-MM-dd"
                                  v-model="search.startNextTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="endNextTime">
                  <el-date-picker type="date"
                                  placeholder="下次跟进结束时间"
                                  v-model="search.endNextTime"
                                  value-format="yyyy-MM-dd"
                                  :picker-options="{disabledDate1}" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <template v-if="abnormalState == '2'">
                <el-col :lg="4" :md="6">
                  <el-form-item  prop="dealUserName">
                    <el-input v-model="search.dealUserName"  placeholder="处理人"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="4" :md="6">
                  <el-form-item prop="startDealDate">
                    <el-date-picker type="date"
                                    placeholder="处理开始时间"
                                    value-format="yyyy-MM-dd"
                                    v-model="search.startDealDate" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :lg="4" :md="6">
                  <el-form-item prop="endDealDate">
                    <el-date-picker type="date"
                                    placeholder="处理结束时间"
                                    v-model="search.endDealDate"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="{disabledDate2}" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </template>
              <el-col :lg="4" :md="6">
                <el-form-item prop="serviceUserName">
                  <el-input v-model="search.serviceUserName"  placeholder="服务方"></el-input>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-form>
      </Portlet>
    </div>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-warehouse-order/orderAbnormal/getServiceAbnormalList"
        :tabs="tabs"
        :initParams="{time: search.time}"
        :columns="columns">
        <template slot="column">
          <template slot="preColumn">
            <el-table-column prop="orderNo" fixed="left" width="170px" align="center" label="服务订单号">
              <template slot-scope="scope">
                <a href="javascript: void (0);" @click.prevent="showOrder(scope.row)">
                  {{ scope.row.orderNo }}
                </a>
              </template>
            </el-table-column>
          </template>
          <template slot="column">
            <el-table-column fixed="right" align="center" width="100px" label="操作">
              <template slot-scope="scope">
                <el-button
                  v-if="state == 1"
                  size="mini"
                  type="text"
                  @click="show(scope.row)"
                >
                  {{ abnormalState == '1' ? '处理' : '详情' }}
                </el-button>
              </template>
            </el-table-column>
          </template>
          <el-table-column fixed="right" width="100px" align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="show(scope.row, state)"
              >
                <span>{{abnormalState == 1 ? '处理' : '详情'}}</span>
              </el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </div>
</template>
<script>
import {copy} from '@/utils'
import {unixTimestampFilter, filterDataBaseDictionary} from '@/filters'
import moment from 'moment'
import {getAbnormalType, getSubDictListOfParentCode} from '@/utils/selectOptions'

export default {
  name: 'abnormalServiceAbnormalIndex',
  data() {
    let that = this
    let columns = [
      {
        label: '异常流水号',
        data: 'abnormalSerNo'
      },
      {
        label: '异常类型',
        data: 'abnormalType',
        render: (data, full) => {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '异常包件',
        data: 'abnormalPackNums'
      },
      {label: '商家名称', data: 'cargoOwnerName'},
      {label: '用户名称', data: 'consigneName'},
      {label: '用户电话', data: 'consignePhone'},
      {label: '服务方', data: 'serviceUserName'},
      {
        label: '服务类型',
        data: 'service',
        render: (data, full) => {
          return filterDataBaseDictionary(data)
        }
      },
      {label: '发起人', data: 'founderName'},
      {
        label: '发起时间',
        data: 'foundDate',
        render: (data, full) => {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm')
        }
      }
    ]
    let columns1 = copy(columns, true)
    columns1.splice(11, 0,
      {
        label: '跟进人',
        data: 'followUserName'
      },
      {
        label: '跟进内容',
        data: 'followType',
        render: (data, full) => {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '下次跟进日期',
        data: 'nextTime',
        render: (data, type, full, meta) => {
          return unixTimestampFilter(data, 'YYYY-MM-DD')
        }
      })
    let columns2 = copy(columns, true)
    columns2.splice(11, 0,
      {
        label: '处理人',
        data: 'dealUserName'
      }, {
        label: '处理时间',
        data: 'dealDate',
        render: (data, full) => {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm')
        }
      }
    )
    return {
      search: {
        orderNo: '',
        abnormalSerNo: '',
        abnormalCode: '',
        cargoOwnerName: '',
        founderName: '',
        consigneName: '',
        consignePhone: '',
        startfoundDate: '',
        endfoundDate: '',
        followUserName: '',
        followType: '',
        startNextTime: '',
        endNextTime: '',
        dealUserName: '',
        startDealDate: '',
        endDealDate: '',
        serviceUserName: ''
      },
      totalItem: 0,
      abnormalState: '1',
      params: {
        pageSize: 20,
        pageNum: 1
      },
      isOpen: false,
      searchLoading: false,
      idArr: [],
      abnormalArr: [],
      followTypeArr: [],
      tabs: [
        {
          label: '处理中',
          columns: columns1,
          callback(params) {
            params.abnormalState = '1'
            that.abnormalState = '1'
          }
        },
        {
          label: '已完成',
          columns: columns2,
          callback(params) {
            params.abnormalState = '2'
            that.abnormalState = '2'
          }
        }
      ],
      columns: columns
    }
  },
  created() {
    getAbnormalType().then(arr => {
      this.abnormalArr = arr || []
    })
    getSubDictListOfParentCode('zhiyingOrderFollow').then(arr => {
      this.followTypeArr = arr || []
    })
  },
  methods: {
    disabledDate(time) { // 发起时间
      return time.getTime() < moment(this.search.startfoundDate).format('x')
    },
    disabledDate1(time) { // 跟进时间
      return time.getTime() < moment(this.search.startNextTime).format('x')
    },
    disabledDate2(time) { // 处理时间
      return time.getTime() < moment(this.search.startDealDate).format('x')
    },
    searchFunc(search) {
      let data = copy(search, true)
      this.searchLoading = true
      this.$refs.BasicTable.search(data).finally(_ => {
        this.searchLoading = false
      })
    },
    resetFields() {
      this.$refs.searchForm.resetFields()
    },
    refresh() {
      this.$refs.dataTable.draw()
    },
    show(data) {
      this.$router.push({
        path: '/ss-oms/service/abnormal/show/' + data.id,
        query: {serOrderPackId: data.serOrderPackId}
      })
    },
    showOrder(data) {
      this.$router.push({path: '/ss-oms/orders/service-orders/show/' + data.orderId})
    }
  }
}
</script>
